<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="0"
    size="small"
    style="padding: 0 60px"
  >
    <el-form-item label prop="completePicture">
      <el-input v-model="ruleForm.completePicture" class="hide" />
      <el-upload
        :action="$V.uploadURL"
        :headers="{token: $getToken()}"
        :on-success="handleUploadSuccess"
        :on-remove="handleUploadRemove"
        :on-error="handleUploadError"
        :file-list="orderImages"
        list-type="picture-card"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

      <p style="color: #4caf50; marginTop: 5px;fontSize: 12px">这里您可以上传维修完成的图片</p>
    </el-form-item>
  </el-form>
</template>

<script>
/* Mixins
------------------------------- */
import { Form } from '@/mixins'

/* Api
------------------------------- */

/* Model
------------------------------- */
import { orderImagesModel } from '../model'

export default {
  mixins: [Form('ruleForm', orderImagesModel)],
  data () {
    return {
      ruleForm: Object.assign({}, orderImagesModel),
      rules: {},

      orderImages: []
    }
  },
  methods: {
    // --------------------------------------  upload 开始 --------------------------------------
    handleUploadSuccess (res, file, fileList) {
      if (res.result !== httpStatus.OK) {
        this.$message.error(res.message)
        return
      }
      this.ruleForm['completePicture'] = fileList
        .map((it) => (it.response && it.response.data) || it.name)
        .join(',')
    },

    handleUploadError (_, file, fileList) {
      this.$message.error(this.$t('fileUploadError'))
    },

    handleUploadRemove (file, fileList) {
      this.ruleForm['completePicture'] = fileList
        .map((it) => (it.response && it.response.data) || it.name)
        .join(',')
      // this.updateOrderImages()
    },
    updateOrderImages () {
      this.orderImages = (this.ruleForm.completePicture || '')
        .split(',')
        .filter(Boolean)
        .map((it) => {
          return {
            name: it,
            url: this.$V.staticBaseURL + it
          }
        })
    }
    // --------------------------------------  upload 结束  -------------------------------------
  },
  computed: {},

  mounted () {
    this.updateOrderImages()
  }
}
</script>
<style lang="scss">
.dashed-border {
  position: relative;
  img {
    border: 1px dashed #eee;
    width: 75px !important;
    height: 75px !important;
  }
}
// .ani-grow:hover:after {
//   visibility: visible;
//   transform: scale(1);
// }
// .ani-grow:after {
//   content: "";
//   position: absolute;
//   display: block;
//   width: 100%;
//   height: 100%;
//   background: rgba(0, 0, 0, 0.2);
//   top: 0;
//   left: 0;
//   visibility: hidden;
//   transform: scale(0.3);
//   transition: all 0.2s ease 0s;
// }
</style>
